<template>
  <div class="allviedeo-box">

    <div class="allvideo-info-box">
      <div class="history-video">
        <div class="history-video-title">
          <div class="title-left">
            <p class="title" style="font-size:24px">历史记录</p>
            <!-- <span class="title-more"
              >更多<i class="iconfont icon-youjiantou"></i
            ></span> -->
          </div>
          <div class="title-right" @click="handerDel"><i class="iconfont icon-lajitongshanchu" style="padding-right:5px"></i>清空历史</div>
        </div>
        <!-- 今天的列表 -->
        <div class="history-video-info" v-if="todayList.length!==0">
           <div class="history-time">
              今天
            </div>
          <div class="all-history-video">

            <VideoBox v-for="data in todayList " :key="data.video_id" :data="data"></VideoBox>

          </div>
        </div>

        <!-- 昨天 -->
          <div class="history-video-info" v-if="yesterdayList.length!==0">
           <div class="history-time">
              昨天
            </div>
          <div class="all-history-video">

            <VideoBox v-for="data in yesterdayList " :key="data.video_id" :data="data"></VideoBox>

          </div>
        </div>
        <!-- 一周 -->
           <div class="history-video-info" v-if="weekList.length!==0">
           <div class="history-time">
            一周
            </div>
          <div class="all-history-video">

            <VideoBox v-for="data in weekList " :key="data.video_id" :data="data"></VideoBox>

          </div>
        </div>
        <!-- 更多 -->
          <div class="history-video-info" v-if="moreList.length!==0">
           <div class="history-time">
              更多
            </div>
          <div class="all-history-video">

            <VideoBox v-for="data in moreList " :key="data.video_id" :data="data"></VideoBox>

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import VideoBox from '@/components/video/videoBox.vue'

import http from '@/util/http'
export default {
  props: {
    VideoBox

  },
  data () {
    return {
      todayList: [], // 今天的历史列表
      yesterdayList: [], // 昨天的历史的列表
      weekList: [], // 一周内的历史列表
      moreList: [], // 更多的历史列表
      page: 1 // 数据页码

    }
  },
  computed: {
    ...mapState(['user', 'delVideoHistory']),
    delVideoHistory () {
      return this.delVideoHistory
    }
  },
  watch: {
    // 清空历史纪律之后
    delVideoHistory () {
      this.page = 1
      this.getMyHistory()
    }
  },
  mounted () {
    this.getMyHistory()
  },
  methods: {
    ...mapMutations(['meshowConsider', 'handerConsiderData']),
    // 删除全部历史纪律
    handerDel () {
      this.meshowConsider(true)
      this.handerConsiderData({ title: '清空观看历史', text: '清空后不可恢复!', type: 'delhistory', uid: this.user.uid })
      console.log(this.user.uid)
    },
    // 获取历史数据的方法
    getMyHistory () {
      http.getMyHistory(this.user.uid, this.page).then(res => {
        console.log(res.data.historyList)
        this.todayList = res.data.historyList.today
        this.yesterdayList = res.data.historyList.yesterday
        this.weekList = res.data.historyList.week
        this.moreList = res.data.historyList.more
        this.page++
      })
    }

  }

}
</script>

<style lang="scss" scoped>
.allviedeo-box {
  width: 100%;

  .allvideo-info-box {
    width: 100%;
    margin-bottom: 30px;
    .history-video,
    .recommend-video {
      width: 100%;

      .history-video-title,
      .recommend-video-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 20px;

        .title-left {
          display: flex;
          align-items: flex-end;
          margin-left: 10px;

          .title {
            font-weight: 600;
            font-size: 18px;
            color: #333;
            padding-right: 15px;
          }
          .title-more {
            font-size: 14px;
            color: #939393;
          }
        }
        .title-right {
          font-size: 14px;
          color: #939393;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .history-video-info,
      .recommend-video-info {
        width: 100%;
        .history-time{
          font-weight: 600;
          font-size: 18px;
          color: #333;
          padding-left: 15px;
          margin-top: 20px;
        }
        .all-history-video,
        .all-recommend-video {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .all-history-video-box,
          .all-recommend-video-box {
            width: 32%;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            margin: 25px 0 0 10px;

            .video-img {
              width: 100%;
              overflow: hidden;
              border-radius: 5px 5px 0 0;
              position: relative;

              img {
                display: block;
                width: 100%;
                border-radius: 5px 5px 0 0;
                transition: all 0.3s;

                &:hover {
                  filter: brightness(90%);
                  transform: scale(1.1);
                  opacity: 1;
                }
              }
              .duration {
                color: #eee;
                font-size: 12px;
                padding: 0 5px;
                background: rgba($color: #000, $alpha: 0.8);
                position: absolute;
                bottom: 5%;
                right: 5%;
              }
            }
            .video-infotitle {
              font-size: 14px;
              font-weight: 700;
              color: #333;
              padding: 10px 10px 20px;

              &:hover {
                color: #f90;
              }
            }
            .publish-author {
              width: 100%;
              display: flex;
              align-items: center;
              padding-bottom: 10px;

              .left {
                width: 15%;
                padding: 0 15px;

                .publish-author-img {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  overflow: hidden;
                  border: 1px solid #f5f5f5;

                  img {
                    display: block;
                    width: 100%;
                    border-radius: 50%;

                    &:hover {
                      filter: brightness(90%);
                      opacity: 1;
                    }
                  }
                }
              }
              .right {
                width: 80%;
                line-height: 18px;
                font-size: 12px;
                color: #939393;

                .publish-author-name {
                  &:hover {
                    color: #f90;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
